<template>
  <el-container>
    <el-main id="content">
      <div id="top">
        <h2>新增培训</h2>
      </div>
      <el-form
        style="position: absolute; top: 80px; padding-left: 100px"
        :label-position="labelPosition"
        label-width="100px"
        :model="form"
        ref="form"
        :rules="rules"
      >
        <el-form-item label="培训主题" prop="name">
          <el-input
            v-model="form.name"
            style="width: 400px"
            placeholder="请输入培训主题"
          ></el-input>
        </el-form-item>
        <el-form-item label="培训内容" prop="content">
          <el-input
            type="textarea"
            v-model="form.content"
            placeholder="请输入培训内容"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="开始时间"
          value-format="yyyy-MM-dd"
          prop="startDate"
        >
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.startDate"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endDate">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.endDate"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="参加人员" required prop="userId">
          <el-select v-model="form.userId" multiple placeholder="请选择参加人员">
            <el-option
              v-for="item in userlist"
              :label="item.name+'\t('+item.identityCard+')'"
              :key="item.identityCard"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="进行中"></el-radio>
            <el-radio label="已结束"></el-radio>
          </el-radio-group>
        </el-form-item>
        <div style="position: absolute; left: 500px">
          <el-button
            type="primary"
            round
            style="width: 150px"
            @click="submitForm()"
            >确定</el-button
          >
          <el-button
            type="warning"
            round
            style="position: absolute; left: 250px; width: 150px"
            @click.native="back()"
            >返回</el-button
          >
        </div>
      </el-form>
      <img
        src="~@/assets/images/train.jpg"
        style="position: absolute; left: 800px; top: 100px"
      />
    </el-main>
  </el-container>
</template>
<script>
import index from "@/components/Breadcrumb/index.vue";
import api from "@/api/train";
import userApi from '@/api/userdoc'
export default {
  components: { index },
  data() {
    return {
      labelPosition: "left",
      form: {
        name: "",
        content: "",
        startDate: "",
        endDate: "",
        status: "",
        userId: '',
       
      },
       userlist: [],
      //定义表单校验规则
      rules: {
        name: [
          { required: true, message: "请输入培训主题", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: "请输入培训培训内容",
            trigger: "blur",
          },
          {
            min: 3,
            max: 50,
            message: "长度在 3 到 50 个字符",
            trigger: "blur",
          },
        ],
        startDate: [
          {
            type: "date",
            required: true,
            message: "请选择开始日期",
            validator: this.startDate,
          },
        ],
        endDate: [
          {
            type: "date",
            required: true,
            message: "请选择结束日期",
            validator: this.endDate,
          },
        ],
        status: [
          { required: true, message: "请选择培训当前状态", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      if (this.form.status == "进行中") this.form.status = 0;
      else this.form.status = 1;
      //调用后端接口就行插入数据
      api.addPlan(this.form).then((response) => {
        this.$message({
          message: "添加培训记录成功",
          type: "success",
        });
        setTimeout(() => {
          this.back();
        }, 500);
      });
    },
    back() {
      this.$router.push({ path: "/employee/train" });
      this.$router.go(0);
    },
  },
  created(){
    userApi.getList().then(response=>{
      this.userlist=response.list
    })
  }
};
</script>
<style scoped>
#content {
  position: absolute;
  top: 120px;
  width: 92%;
  height: 74%;
  margin: 0 4%;
  padding: 0;
  border: 4px solid rgb(245, 245, 245);
}
#top {
  margin: 0;
  width: 100%;
  height: 10%;
  position: absolute;
  top: 0;
  padding: 0;
  background-color: rgb(245, 245, 245);
}
#top h2 {
  position: absolute;
  top: -15px;
  left: 45%;
}
</style>